@()(implicit request: RequestHeader)
@main("Cazy注释(碳水化合物相关酶)")("cazy") {

	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa "></i>
					<a href="">Cazy注释(碳水化合物相关酶)</a>
				</li>
			</ul>
		</div>


		<div class="row-fluid">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption">
								Cazy注释(碳水化合物相关酶)
								<a target="_blank" style="color: white" href="http://www.cazy.org/"><span class="fa fa-question-circle"></span></a>
							</div>
						</div>

						<div class="portlet-body">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post">

								<div class="form-group">
									<label class="control-label col-sm-2">任务名:</label>
									<div class="col-sm-3">
										<input class="form-control" name="missionName" onfocus="inputSelect(this)">
									</div>

								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">Type of query:</label>
									<div class="col-sm-3">
										<select class="form-control" onchange="change(this)" name="method">
											<option selected value="text">Text</option>
											<option value="file">File</option>
										</select>
									</div>
								</div>

								<div class="form-group" id="queryContent">
									<label class="control-label col-sm-2">Query text:<br>(核酸序列)</label>
									<div class="col-sm-8">
										<textarea class="form-control monospace" name="queryText" id="queryText" rows="7"></textarea>
										<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egQuery">
											示例</em></a></span>
									</div>
								</div>

								<div id="queryFile" style="display: none;">
									<div class="form-group">
										<label class="control-label col-sm-2">Query fasta file:</label>
										<div class="col-sm-8">
											<input id="input-1" type="file" class="file control-label" name="file" data-show-preview="false"
											data-show-upload="false" accept="fa,fasta">
										</div>
									</div>
								</div>

								<div class="form-group">
									<div class="actions col-sm-offset-2 col-sm-2">
										<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="CazyAnno.myRun">
											运行</button>
									</div>

									<div class="actions  col-sm-2">
										<button type="reset" class="btn btn-primary" style="width: 90%;">
											重置</button>
									</div>
								</div>

							</form>

						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row-fluid">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption">
								分析结果
							</div>
						</div>

						<div class="portlet-body">

							<div class="table-responsive">

								<table class="display table table-bordered" id="missionTable" data-pagination="true" data-search="true"
								data-toolbar="#toolbar" data-page-list="[5, 10, all]" data-page-size="5" data-multiple-search="true">
									<thead>
										<tr>
											<th data-field="missionName" data-sortable="true">任务名</th>
											<th data-field="args" data-sortable="true" data-formatter="genome.argsFmt">
												参数</th>
											<th data-field="state" data-sortable="true"
											data-formatter="Genome.stateFmt"
											>状态</th>
											<th data-field="startTime" data-sortable="true">开始时间</th>
											<th data-field="endTime" data-sortable="true">结束时间</th>
											<th data-field="operate" data-formatter="genome.operateFmt">操作</th>
										</tr>
									</thead>
								</table>
							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

		<div class="row-fluid" id="result" style="display: none">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-madison box">
						<div class="portlet-title">
							<div class="caption" id="missionResult">
								Cazy注释结果展示(<span id="missionName"></span>)
							</div>
						</div>

						<div class="portlet-body">

							<div id="resultContent">

								<label>显示的列:</label>
								<div id="checkbox" class="checkbox">

								</div>

								<div class="table-responsive" id="tableContent">
									<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
									data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
									data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
									>
										<thead>
											<th data-field='geneId' data-sortable='true' id="marker">Query</th>
										</thead>
									</table>

								</div>

							</div>

						</div>
					</div>
				</div>
			</div>

		</div>

	</div>

	<script>
			var originalHtml = ""
			var kind = "cazy"
			$(function () {
				CazyAnno.init

				var wsUri = "ws://" + window.location.host +"@routes.GenomeController.updateMissionSocket("cazy")"
				genome.testWebSocket(wsUri);
				originalHtml = $("#tableContent").html()
			})

			function showResult(id, missionName) {
				$("#missionName").text(missionName)
				showId = id
				var index = layer.load(1, {
					shade: [0.1, '#fff']
				});
				$.ajax({
					url: "@routes.GenomeController.cazyResult()?missionId=" + id,
					type: "get",
					dataType: "json",
					success: function (data) {
						layer.close(index)
						refreshContent(data)
						$("#result").show()
						var target_top = $("#missionResult").offset().top
						$("html,body").animate({scrollTop: target_top}, 800)
					}
				})
			}

			function setColumns(value) {
				var element = $("input:checkbox[value='" + value + "']")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}

			function change(element) {
				var value = $(element).find(">option:selected").val()
				if (value == "text") {
					$("#queryContent").show()
					$("#queryFile").hide()
				} else {
					$("#queryContent").hide()
					$("#queryFile").show()
				}
			}

			$('#egQuery').click(function () {
				var eg = ">Scaffold1\n" +
						"TAACCGCAACTATGGCCCGCACTCGGCCATTATGGCGGGATTCAGCCATGTGACCGGCGA\n" +
						"TCTGATTATTACCCTTGATGCCGACCTGCAAAACCCACCGGAAGAGATCCCGCGCCTGGT\n" +
						"GGCGAAGGCGGACGAAGGTTACGACGTGGTCGGTACCGTTCGGCAGAACCGCCAGGACAC\n" +
						"CTTCTTCCGTAAAAGCGCGTCGAAGATGATCAACCGCCTGATTCAGCGCACCACCGGTAA\n" +
						"AGCGATGGGGGACTACGGCTGCATGCTGCGCGCCTATCGCCGCCACATTATCGACGCGAT\n" +
						"GCTCAATTGCCATGAACGCAGTACGTTTATCCCGATTCTGGCAAATACCTTCGCGCGCCG\n" +
						"GGCGGTCGAAATCCCGGTGATGCACGCGGAGCGTGAATTTGGCGATTCCAAATACAGCTT\n" +
						"TATGCGCCTGATTAATCTGATGTACGACCTGGTGACCTGTTTGACCACCACGCCGCTGCG\n" +
						"TCTGCTGAGCGTCTTTGGCAGCGTGATTGCCCTGCTGGGCTTCGCTTTCGCCTTCCTGCT\n" +
						"GGTG\n"

				$('#queryText').val(eg);
				$("#form").bootstrapValidator("revalidateField", "queryText")
			});

			function refreshContent(data) {
				var checkboxHtml = ""

				$.each(data.columnNames, function (i, v) {
					checkboxHtml += "<label style='margin-right: 15px'>" +
							"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
							"</label>"
				})

				$("#checkbox").empty().append(checkboxHtml)
				var html = ""
				$.each(data.columnNames, function (i, v) {
					html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
				})
				$("#tableContent").empty().append(originalHtml)
				$("#marker").after(html)
				$('#table').bootstrapTable({
					data: data.array,
					exportOptions: {
						csvSeparator: "\t",
						fileName: 'cazy.anno'
					},
					exportHiddenColumns: true
				});
				$.each(data.columnNames, function (n, value) {
							$('#table').bootstrapTable('hideColumn', value);
							$("input:checkbox[value='" + value + "']").prop("checked", false)
						}
				);
				var showColumns = ["Subject", "Evalue", "cazy-class", "cazy-note", "cazy-activities"]
				$.each(showColumns, function (n, value) {
							$('#table').bootstrapTable('showColumn', value);
							$("input:checkbox[value='" + value + "']").prop("checked", "true")
						}
				);
			}


			$("#input-1").fileinput({
				showPreview: false,
				browseLabel: "选择...",
				removeLabel: "删除文件",
				language: "zh"
			});

	</script>


}
